require(['./config'],()=>{
    require(['template','header','footer'],(template)=>{
        class Shopping{
            constructor(){
                this.init()
                if(this.cart){
                    this.checksChange()
                    this.caleTotalMoney()
                    this. setAllcheck()
                    this.allchangCheck()
                    this.numChange()
                    this. remove()
                }
                
            }
            // 初始化
            init(){
                const cart=localStorage.getItem('cart')
                if(cart){
                   this.cart=JSON.parse(cart)
                    $('#shop-tbody').html(template('shopTobyTemplate',{cart:this.cart}))
                }else{
                    $('.goods-list').hide()
                    $('.goods-price').hide()
                    $('#cart-empty').show()
                }
            }

            // 勾选框的选择 ：商品的勾选
            checksChange(){
                const _this = this
                $('.checks').on('change', function () {
                  const id = $(this).parents('tr').data('id')
                  _this.cart = _this.cart.map(shop => {
                    if (shop.id === id) {
                      shop.check = $(this).prop("checked")
                    }
                    return shop
                  })
                  localStorage.setItem('cart',JSON.stringify(_this.cart))
                  _this.caleTotalMoney()
                  _this.setAllcheck()
                })
            }
            // 全选按钮：所有商品勾选，全选也勾选
            setAllcheck(){
               $('#allCheck').prop('checked',this.cart.every(shop=> shop.check)) 
            }
            // 全选按钮勾选，所有商品也勾选；全选按钮取消，所有商品也取消勾选
            allchangCheck(){
               const _this=this
                $('#allCheck').on('change',function(){
                  const allcheck=$(this).is(':checked')
                  if(allcheck){
                      _this.cart=_this.cart.map(shop=>{
                        shop.check=$('#allCheck').prop("checked")
                        $('.checks').prop('checked',allcheck)
                        return shop
                      })
                    }else{
                        _this.cart=_this.cart.map(shop=>{
                        shop.check=$('#allCheck').prop("checked")
                        $('.checks').prop('checked',allcheck)
                        return shop
                      })
                    }
                    localStorage.setItem('cart',JSON.stringify(_this.cart))
                    _this.caleTotalMoney()
                    _this. setAllcheck()
                })  
            }
            // 当前商品加减输入框的设置，总价和小计相应改变
            numChange(){
                const _this=this
                $('.shopadd').on('click',function(){
                    const id=$(this).parents('tr').data('id')
                    _this.cart=_this.cart.map(shop=>{
                        if(shop.id===id){
                            shop.count++
                            $(this).parents('tr').find('.numvalu').val(shop.count)
                            let sum=shop.count*shop.price
                            $(this).parents('tr').find('.num-cont').html(sum.toFixed(2)+"元")
                        }
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(_this.cart))
                    _this.caleTotalMoney()
                })
                $('.shopdel').on('click',function(){
                    const id=$(this).parents('tr').data('id')
                    _this.cart=_this.cart.map(shop=>{
                        if(shop.id===id){
                            shop.count--
                            if( shop.count<2){
                                shop.count=1
                            }
                            $(this).parents('tr').find('.numvalu').val(shop.count)
                            let sum=shop.count*shop.price
                            $(this).parents('tr').find('.num-cont').html(sum.toFixed(2)+"元")
                        }
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(_this.cart))
                    _this.caleTotalMoney()
                })
            }
            // 商品总计
            caleTotalMoney(){
                const total=this.cart.reduce((money,shop)=>{
                    if(shop.check){
                        money += shop.price*shop.count
                    }
                    return money
                },0)
                $('#payMoney').html(total.toFixed(2))
            } 
            // 当前商品删除
            remove(){
                const _this=this
                $('.del').on('click',function(){
                    const id=$(this).parents('tr').data('id')
                    _this.cart=_this.cart.filter(shop=>{
                        if(shop.id===id){
                            $(this).parents('tr') .remove()  
                        }else{
                            return shop
                        }
                    })
                    let len=_this.cart.length
                    if(len===0){
                        localStorage.removeItem('cart')
                        $('.goods-list').hide()
                        $('.goods-price').hide()
                        $('#cart-empty').show()
                    }

                   localStorage.setItem('cart',JSON.stringify(_this.cart))
                   _this.caleTotalMoney()
                   _this.numChange()
                   _this.setAllcheck()
                })
                
            }
        }
        new Shopping()
    })
})